<template>
  <el-button type="primary" @click="router.push('/homepage')">返回主页</el-button>
  <div class="contentbox">
    <h1 style="width: 800px; text-align: center;">选择科室</h1>
    <a class="department" href="" v-for="(item, key) in departmentlist" :key="key" @click.prevent="getdiseaselist(item.id)">
      {{ item.name }}
    </a>
    <!-- <ul>
    <li v-for="(item, key) in departmentlist" :key="key"><a href="" @click.prevent="getdiseaselist(item.id)">{{ item.name }}</a></li>
    </ul> -->
  </div>
  <div class="detailbox">
    <h1 style="width: 800px; text-align: center;">选择疾病</h1>
    <a class="disease" href="" v-for="(item, key) in diseaselist" :key="key" @click.prevent="router.push({path: '/disease_detail', query: {id: item.id}})">
      {{ item.name }}
    </a>
  </div>
</template>

<style scoped>
html, body{
  background-color: #f0f0f0;
}
.contentbox{
  width: 800px;
  height: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.department{
  width: 200px;
  height: 200px;
  background-color: #f0f0f0;
  border-radius: 5px;
  margin: 10px;
  text-align: center;
  line-height: 190px;
  color: #000;
  text-decoration: none;
}
.detailbox{
  width: 800px;
  height: 400px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}
.disease{
  width: 200px;
  height: 200px;
  background-color: #fff;
  border-radius: 5px;
  margin: 10px;
  text-align: center;
  line-height: 190px;
  color: #000;
  background-color: #f0f0f0;
  text-decoration: none;
}
</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let departmentlist = ref([])

  let diseaselist = ref([])

  const getdepartmentlist=()=>{
    axios.get(`http://127.0.0.1:8000/disease/department/`)
    .then(res=>{
      console.log(res)
      departmentlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getdiseaselist=(id)=>{
    axios.get(`http://127.0.0.1:8000/disease/disease/?department=${id}`)
    .then(res=>{
      console.log(res)
      diseaselist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  onMounted(()=>{
    getdepartmentlist()
  })

</script>
